<template>
  <div id="Home">
    <el-container>
      <!-- 顶部区域：LOGO + 用户名 + 退出按钮 -->
      <el-header>
        <el-row :gutter="20" class="header-row">
          <!-- LOGO 区域 -->
          <el-col :span="4">
            <div class="logo_div">般铁锚机械网</div>
          </el-col>
          <!-- 用户信息区域 -->
          <el-col :span="20">
            <div class="user-info">
              <!-- 头像（新增，符合需求） -->
              <el-avatar icon="el-icon-user" class="user-avatar" />
              <span class="username">欢迎您, {{ username }}</span>
              <el-button type="text" @click="loginout" class="logout-btn">退出</el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>

      <!-- 主体内容区域：左侧菜单 + 右侧主内容 -->
      <el-row :gutter="20" class="main-content">
        <!-- 左侧菜单栏 -->
        <el-col :span="4">
          <el-container style="height: calc(100vh - 130px);">
            <el-aside width="240px">
              <el-menu
                :router="true"
                default-active="LunBo"
                class="el-menu-vertical-demo"
              >
              
                <el-menu-item index="/index/welcome">
                <el-icon><Monitor /></el-icon>
                  首页
                </el-menu-item>

                <el-sub-menu index="1">
                    <template #title>
                    <el-icon class="el-icon-menu">
                      <User />
                    </el-icon>
                    <span>用户管理</span>
                    </template>
                    <el-menu-item-group>
                    <el-menu-item index="/index/userAll">用户列表</el-menu-item>
                    <el-menu-item index="/index/sellerQualificationAll">卖家资质审核</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>

                <el-sub-menu index="2">
                    <template #title>
                      <el-icon class="el-icon-menu">
                        <User />
                      </el-icon>
                    <span>业务员管理</span>
                    </template>
                    <el-menu-item-group>
                    <el-menu-item index="/index/businessmanAll">账户列表</el-menu-item>
                    <el-menu-item index="/index/businessmanXiaoShou">销售列表</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>

                <el-sub-menu index="3">
                    <template #title>
                    <el-icon class="el-icon-menu">
                        <Setting />
                      </el-icon>
                    <span>设备管理</span>
                    </template>
                    <el-menu-item-group>
                    <el-menu-item index="/index/equipmentAll">设备列表</el-menu-item>
                    <el-menu-item index="/index/equipmentOrder">订单列表</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>

                <el-sub-menu index="4">
                    <template #title>
                      <el-icon class="el-icon-menu">
                        <Monitor />
                      </el-icon>
                    <span>日常管理</span>
                    </template>
                    <el-menu-item-group>
                    <el-menu-item index="/index/purchaseInfo">求购信息</el-menu-item>
                    <el-menu-item index="/index/detectionReportAll">评估信息</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>

                <el-sub-menu index="5">
                    <template #title>
                      <el-icon class="el-icon-menu">
                        <CreditCard />
                      </el-icon>
                    <span>内容管理</span>
                    </template>
                    <el-menu-item-group>
                    <el-menu-item index="/index/articleAll">文章内容</el-menu-item>
                    <el-menu-item index="/index/articleCategoryAll">文章分类</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>

                <el-sub-menu index="6">
                    <template #title>
                      <el-icon class="el-icon-menu">
                        <Tools />
                      </el-icon>
                    <span>操作员管理</span>
                    </template>
                    <el-menu-item-group>
                    <el-menu-item index="/index/role">角色列表</el-menu-item>
                    <el-menu-item index="/index/operatorAll">用户管理（操作员）</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
              </el-menu>
            </el-aside>
          </el-container>
        </el-col>

        <!-- 右侧主内容区 -->
        <el-col :span="20">
          <el-main class="content-area">
            <router-view></router-view>
          </el-main>
        </el-col>
      </el-row>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { User, Setting, Monitor, CreditCard, Tools, Calendar, ForkSpoon, Link } from '@element-plus/icons-vue';

const username = ref('');
const userAvatar = ref(''); // 可选：头像 URL 或默认图标

onMounted(() => {
  const userInfoStr = sessionStorage.getItem('userInfo');
  if (userInfoStr) {
    const userInfo = JSON.parse(userInfoStr);
    username.value = userInfo.name || userInfo.loginName || '管理员';

  }
});

// 退出登录函数
const loginout = () => {
  sessionStorage.removeItem('userInfo');
  sessionStorage.removeItem('username');
  ElMessage.success('退出成功!');
  window.location.href = '/login'; // 跳转到登录页
};
</script>

<style scoped>
/* 设置整体容器占满全屏 */
#Home {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#Home > el-container {
  height: 100%;
}

/* 顶部区域 */
.header-row {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* 确保它在其他元素之上 */
  height: 60px;
  line-height: 60px;
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo_div {
  font-size: 18px;
  font-weight: bold;
  color: #1989fa;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.username {
  font-size: 14px;
  color: #333;
}

.logout-btn {
  color: #f56c6c;
}

/* 主体内容区域 */
.main-content {
  display: flex;
  height: calc(100% - 80px); /* 顶部60px +  margin-top:20px */
}

/* 左侧菜单栏 */
.el-menu-vertical-demo {
  height: 100%;
  border-right: 1px solid #e0e0e0;
  background-color: #2c2c2c;
  position: fixed;
  width: 240px;
}
/* 左侧菜单文字颜色 / */
:deep(.el-menu-vertical-demo .el-menu-item),
:deep(.el-menu-vertical-demo .el-sub-menu__title) {
color: #dcdcdc;
}
/* 左侧菜单选中/hover 状态颜色 / */
:deep(.el-menu-vertical-demo .el-menu-item.is-active),
:deep(.el-menu-vertical-demo .el-menu-item:hover),
:deep(.el-menu-vertical-demo .el-sub-menu__title:hover) {
background-color: #4a4a4a;
color: #ffffff;
}
/* 子菜单容器样式（关键：让子菜单可见） */
:deep(.el-menu-vertical-demo .el-sub-menu .el-menu-item-group) {
  background-color: #3a3a3a; /* 子菜单背景色，与父菜单区分 */
}
/* 子菜单选中/hover 状态 */
:deep(.el-menu-vertical-demo .el-sub-menu .el-menu-item.is-active),
:deep(.el-menu-vertical-demo .el-sub-menu .el-menu-item:hover) {
  background-color: #555555;
  color: #ffffff;
}

/* 菜单图标样式 */
:deep(.el-menu-vertical-demo .el-icon) {
  color: #b0b0b0; /* 图标颜色 */
}

:deep(.el-menu-vertical-demo .el-menu-item.is-active .el-icon),
:deep(.el-menu-vertical-demo .el-menu-item:hover .el-icon),
:deep(.el-menu-vertical-demo .el-sub-menu__title:hover .el-icon) {
color: #ffffff;
}


/* 右侧主内容区 */
.content-area {
  flex: 1;
  background-color: #f0f0f0;
  padding: 20px;
  overflow-y: auto;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .main-content {
    flex-direction: column;
  }
  .el-col :deep(.el-col-span-4) {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .el-col :deep(.el-col-span-20) {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
</style>